<!-- 2021010331许波 -->
<template>
  <div>
    <table>
      <tr>
        <td colspan="2"><h2>填写新商品的信息</h2></td>
      </tr>
      <tr>
        <td>商品编号</td>
        <td><input type="text" v-model.number="id"></td>
      </tr>
      <tr>
        <td>商品名称</td>
        <td><input type="text" v-model="title"></td>
      </tr>
      <tr>
        <td>商品产地</td>
        <td><input type="text" v-model="city"></td>
      </tr>
      <tr>
        <td>商品价格</td>
        <td><input type="text" v-model="price"></td>
      </tr>
      <tr>
        <td>商品数量</td>
        <td><input type="text" v-model.number="quantity"></td>
      </tr>
      <tr>
        <td colspan="2"><button @click="addCart">加入购物车</button></td>
      </tr>
    </table>
    <table>
      <thead>
        <tr>
          <td colspan="7"><h2>手机专卖场</h2></td>
        </tr>
        <tr>
          <th>编号</th>
          <th>商品名称</th>
          <th>商品产地</th>
          <th>价格</th>
          <th>数量</th>
          <th>金额</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="g in goods" :key="g.id">
          <td>{{ g.id }}</td>
          <td>{{ g.title }}</td>
          <td>{{ g.city }}</td>
          <td>{{ g.price }}</td>
          <td>
            <button :disabled="g.count === 0" @click="increment({ id: g.id, count: -1 })">-</button>
            {{ g.count }}
            <button @click="increment({ id: g.id, count: 1 })">+</button>
          </td>
          <td>{{ itemPrice(g.id) }}</td>
          <td><button @click="deleteItem(g.id)">删除</button></td>
        </tr>
      </tbody>
    </table>
    <span>总价：￥{{ totalPrice }}</span>
  </div>
</template>
<script>
import { mapActions, mapGetters, mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      id: null,
      title: '',
      city: '',
      price: '',
      quantity: 1
    }
  },
  computed: {
    ...mapState('cart', {
      goods: 'items'
    }),
    ...mapGetters('cart', {
      itemPrice: 'cartItemPrice',
      totalPrice: 'cartTotalPrice'
    })
  },
  methods: {
    ...mapMutations('cart', {
      increment: 'incrementItemCount'
    }),
    ...mapMutations('cart', [
      'deleteItem'
    ]),
    ...mapActions('cart', [
      'addItemToCart'
    ]),
    addCart () {
      this.addItemToCart({
        id: this.id,
        title: this.title,
        city: this.city,
        price: this.price,
        count: this.quantity
      })
      this.id = ''
      this.title = ''
      this.city = ''
      this.price = ''
    }
  }
}
</script>

<style scoped>
  div {
    width: 800px;
  }
  table {
    border: 1px solid #000;
    width: 100%;
    margin-top: 20px;
  }
  th {
    height: 50px;
  }
  th, td {
    border-bottom: 1px solid #ddd;
    text-align: center;
  }
  span {
    float: right;
  }
</style>
